<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/merchant-home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图  -->
    <el-card>
        <el-row :gutter="12">
            <el-col :span="8">
                <el-input placeholder="请输入内容" v-model="queryInfo.query">
                    <el-button slot="append" icon="el-icon-search" @click="getOrderList"></el-button>
                </el-input>
            </el-col>
            <el-col :span="8">
                <el-select @change="getOrderList" v-model="queryInfo.status" filterable placeholder="订单状态">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
        </el-row>
        <!-- 订单列表数据 -->
        <el-table :data="orderlist" border stripe>
            <el-table-column type="index"></el-table-column>
            <el-table-column label="订单编号" prop="id" width="100"></el-table-column>
            <el-table-column label="订单价格" prop="price"></el-table-column>
            <el-table-column label="支付方式" prop="way"></el-table-column>
            <el-table-column label="订单状态">
                <template slot-scope="scope">
                    <el-tag>{{ scope.row.status }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="下单时间" prop="deliverydate">
                <template slot-scope="scope">
                    {{ scope.row.deliveryDate | dateFormat }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="250">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" icon="el-icon-edit" @click="showBox"></el-button>
                    <el-button size="mini" type="success" icon="el-icon-location" @click="showProgress(scope.row.logisticsNumber)"></el-button>
                    <el-button v-if="scope.row.status === '已付款'" size="mini" type="primary" @click="show(scope.row.id)">发货</el-button>
                    <el-tooltip class="item"
                    effect="dark" content="订单详情"
                    placement="top" :enterable="false">
                        <el-button type="info" size="mini" icon="el-icon-s-order" @click="detailed(scope.row)"></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[1, 2, 5, 10]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 修改地址对话框 -->
    <el-dialog
    title="修改地址"
    :visible.sync="addressVisible"
    width="50%" @close="addressVisibleClosed">
    <el-form :model="addressForm" :rules="addressFormRules" ref="addressFormRef" label-width="100px">
        <el-form-item label="省市区/县" prop="address1">
            <el-cascader collapse-tags="true" :options="cityData" v-model="addressForm.address1"></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="address2">
            <el-input v-model="addressForm.address2"></el-input>
        </el-form-item>
    </el-form>
    <span slot="footer">
        <el-button @click="addressVisible = false">取 消</el-button>
        <el-button type="primary" @click="addressVisible = false">确 定</el-button>
    </span>
    </el-dialog>
    <!-- 展示物流界面的对话框 -->
    <el-dialog
    title="物流进度"
    :visible.sync="progressVisible"
    width="40%">
    <!-- 物流进度时间线 -->
    <el-timeline :reverse="true">
        <el-timeline-item
        v-for="(activity, index) in progressInfo"
        :key="index"
        :timestamp="activity.deliveryTime">
        {{ activity.status }}  {{activity.company}}
        </el-timeline-item>
    </el-timeline>
    </el-dialog>
    <!-- 填写订单号 -->
    <el-dialog
    title="填写订单"
    :visible.sync="Visible"
    @close="logClosed()"
    width="40%">
        <el-form :model="log" :rules="logisticsFormRules" ref="logisticsRef" label-width="100px">
            <el-form-item label="物流单号" prop="logistics">
                <el-input v-model="log.logistics"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer">
        <el-button @click="Visible = false">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
    </span>
    </el-dialog>
    <!-- 展示订单详情 -->
    <el-dialog
    title="订单详情"
    :visible.sync="detailedVisible"
    width="60%">
    <div style="font-size: 20px;">
        <span>收件人：{{ detailedAddress.name }}</span>
        <h4>收件人电话：{{ detailedAddress.phone }}</h4>
        <span>收货地址：{{ detailedAddress.city }} {{ detailedAddress.address }}</span>
        <h1><span>订单状态：</span><span style="color: red;font-size: 30px">{{ detailedData.status }}</span></h1>
        <h3>商品名：{{ detailedData.productName }}</h3>
        <el-image :src="detailedData.productUrl" style="width: 100px; height: 100px"></el-image>
        <div>数量： <span>{{ detailedData.quantity }}</span></div>
        <span>单价： ￥{{ detailedData.price }}</span>
        <div>小计： <sapn>￥</sapn><span style="color: red;font-size: 25px;">{{ subtotal }}</span></div>
    </div>
    <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="detailedVisible = false">取 消</el-button> -->
        <el-button type="primary" @click="detailedVisible = false">关 闭</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
import cityData from './citydata.js'

export default {
    data() {
        return {
            queryInfo: {
                query: '',
                merchantId: null,
                pagenum: 1,
                pagesize: 5,
                status: ''
            },
            total: 0,
            orderlist: [],
            addressVisible: false,
            addressForm: {
                address1: [],
                address2: ''
            },
            addressFormRules: {
                address1: [{ required: true, message: '请选择省市区县', trigger: 'blur' }],
                address2: [{ required: true, message: '请填写详细地址', trigger: 'blur' }]
            },
            cityData,
            progressVisible: false,
            progressInfo: [],
            Visible: false,
            log: {
                logistics: null
            },
            id: null,
            logisticsFormRules: {
                logistics: [
                    { required: true, message: '请输入订单号', trigger: 'blur' },
                    { pattern: /^[0-9]*$/, message: '订单号只能输入数字', trigger: 'blur' }
                ]
            },
            // 选择器数据
            options: [{
                value: '',
                label: '全部'
            },
            {
                value: '未付款',
                label: '未付款'
            },
            {
                value: '已付款',
                label: '已付款'
            },
            {
                value: '已发货',
                label: '已发货'
            },
            {
                value: '待签收',
                label: '待签收'
            },
            {
                value: '已签收',
                label: '已签收'
            },
            {
                value: '已评价',
                label: '已评价'
            }],
            // 订单详情对话框
            detailedVisible: false,
            // 订单详情页面数据
            detailedData: [],
            detailedAddress: []
         }
    },
    created() {
        this.queryInfo.merchantId = +window.localStorage.getItem('merchantID')
        this.getOrderList()
    },
    methods: {
        async getOrderList() {
            console.log(this.queryInfo)
            const { data: res } = await this.$axios.get('/order/search', { params: this.queryInfo })
            if (res.code !== 200) {
                return this.$message.error('获取订单列表失败')
            }
            console.log(res)
            this.total = res.data.total
            this.orderlist = res.data.order
        },
        // 展示修改地址的对话框
        showBox() {
            this.addressVisible = true
        },
        addressVisibleClosed() {
            this.$refs.addressFormRef.resetFields()
        },
        // 监听 pagesize 改变的事件
        handleSizeChange(newSize) {
            this.queryInfo.pagesize = newSize
            this.getOrderList()
            console.log(newSize)
        },
        // 监听页码值改变的事件
        handleCurrentChange(newPage) {
            this.queryInfo.pagenum = newPage
            this.getOrderList()
        },
         // 监听对话框的关闭事件
        logClosed() {
            // this.logistics = null
            this.$refs.logisticsRef.resetFields()
        },
        async showProgress(logisticsNumber) {
            // 获取物流信息
            const { data: res } = await this.$axios.get('/shipment/selectBytrackNumber/' + logisticsNumber)
            console.log(res)
            if (res.code !== 200) {
                return this.$message.error('获取物流信息失败！ ')
            }
            this.progressInfo = res.data.shipment
            this.progressVisible = true
        },
        show(id) {
            this.id = id
            this.Visible = true
        },
        // 发货
        async sure() {
            console.log('订单号' + this.log.logistics)
            const List = [{
                id: this.id,
                status: '已发货',
                logisticsNumber: this.log.logistics
            }]
            console.log(List)
            const { data: res } = await this.$axios.put('/order/update/', List)
            console.log(res)
            if (res.code !== 200) {
                return this.$message.error('输入订单号失败')
            }
            this.$message.success('发货成功')
            this.getOrderList()
            this.Visible = false
        },
        // 订单详情页面
        async detailed(row) {
            console.log(row)
            this.detailedData = row
            const { data: res } = await this.$axios.get('/address/' + row.addressId)
            if (res.code !== 200) {
                this.$message.error('没有订单地址信息')
                this.detailedVisible = true
            }
            console.log(res)
            this.detailedAddress = res.data.address[0]
            this.detailedVisible = true
        }
    },
    computed: {
        subtotal() {
            return this.detailedData.quantity * this.detailedData.price
        }
    }
}
</script>

<style lang="less" scoped>
.el-cascader {
    width: 100%;
}
.el-select .el-input {
    width: 230px;
}
.input-with-select .el-input-group__prepend {
    background-color: #fff;
}
</style>
